<template>
  <div class="category">
    <lRTitle :text="statusTitle"></lRTitle>
    <div ref="chart" class="pieChart"></div>
    <div class="circle"></div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import lRTitle from './lRTitle.vue';
import { connrequest } from "@/api/firstPage.js"
import { parseTime } from "@/utils/index.js";
export default {
  name: "categoryStats",
  components: { lRTitle },
  data() {
    return {
      statusTitle: "绩效分析"
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    async initChart() {
      const myChart = this.$echarts.init(this.$refs.chart);
      let endTime = new Date(new Date().setHours(0, 0, 0, 0)).getTime()
      let startTime = endTime - ((Cookies.get('Zhuoguan_DefaultLogDays') || 7) * 24 * 3600 * 1000);
      const data = {
        Paging: {
          QueryPageNo: 1,
          QueryPageLength: 5,
        },
        Filter: {
          StartData: parseTime(startTime,'{y}-{m}-{d}'),
          EndData: '',
        }
      }
      const res = await connrequest('GetWindowProcSumGroupByProcName', data)
      let arr = res.Data.map(item => { 
        return{
          name: item.Name,
          value: item.Count
        }
      })
      // 使用南丁格尔玫瑰图配置
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: { show: false },
        series: [{
          type: 'pie',
          roseType: 'radius', // 关键配置：南丁格尔玫瑰图
          radius: ['40%', '70%'], // 内半径20，外半径70%
          center: ['50%', '50%'],
          color: ['#a2752f', '#b74444', '#b75f44', '#1d4b73', '#006e5f', '#1a577b', '#978750'],
          label: {
            show: true,
            formatter: '{b}\n{d}%', // 名称换行显示百分比
            color: '#ccc',
            fontSize: 12,
            position: 'outside'
          },
          labelLine: {
            show: true,
            length: 15,
            lineStyle: { width: 1 }
          },
          itemStyle: {
            borderWidth: 2
          },
          // 数据需不同以生成不同半径（这里假设数据为[5,4,3,2,1]）
          data: arr
        }]
      };

      myChart.setOption(option);
      window.addEventListener('resize', myChart.resize);
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.$refs.chart.resize);
  }
}
</script>

<style scoped>
.category {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 28%;
}

.pieChart {
  flex: 1;
}
.circle {
  position: absolute;
  bottom: calc(50% - 50px);
  left: 46%;
  width: 2vw; /* 圆环外径 */
  height: 2vw;
  background: transparent; /* 确保中间透明 */
}

.circle::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 10px solid transparent; /* 边框厚度，控制圆环粗细 */
  border-radius: 50%;
  background: conic-gradient(from 0deg,  #a4e4ff 0%, rgba(36,163,216,0.94) 30%, rgba(10,55,74,0) 90%) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude; /* 兼容性 */
}
</style>